<template>
      <div id="model">
            <div class="title">
                  <div class="main">盈利模式</div>
                  <div class="subtitle">多渠道收入,高佣金分润,让合作伙伴收入更多更持久</div>
            </div>
            <div class="content">
                  <div class="item" v-for="(item, index) in list" :key="index">
                        <img :src="item.image" alt="" class="bgimg">
                        <div class="subtitle">
                              {{ item.title }}
                        </div>
                        <div class="inner">
                              {{ item.inner }}
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        list: [
                              {
                                    image:require("../../assets/img/dbg1.png"),
                                    title: "平台搭建",
                                    inner: "商户通过合作伙伴开通支付,盈友拥有完善的培训体系和城市运营团队,会协助合作伙伴拓展市场"
                              },
                              {
                                    image:require("../../assets/img/dbg2.png"),
                                    title: "机具盈利",
                                    inner: "上市公司顶级移动三通道多种机型,低成本物料支持,合作伙伴能够给商户提供物料与硬件的销售"
                              },
                              {
                                    image:require("../../assets/img/dbg3.png"),
                                    title: "佣金分润",
                                    inner: "这个分润是长期收益,而且不需要运营成本的,只要您邀请入驻的商户使用盈友产品完成支付,您就可以长期获得分润"
                              },
                              {
                                    image:require("../../assets/img/dbg4.png"),
                                    title: "营销板块",
                                    inner: "盈友科技拥有强大的营销系统,我们会提供完善的培训体系,指导合作伙伴使用与熟悉这些功能,支持合作伙伴市场推广"
                              },
                        ]
                  }
            },
      }
</script>

<style lang="scss" scoped>
#model {
      width: 100%;
      max-width: 750px;
      margin-top: 0.3rem;
      .title {
            text-align: center;
            .main {
                  font-size: 0.36rem;
            }
            .subtitle {
                  font-size: 0.18rem;
            }
      }
      .content {
            width: 100%;
            .item {
                  width: 100%;
                  height: 1.6rem;
                  position: relative;
                  left: 0;
                  top: 0;
                  text-align: center;
                  color: #fff;
                  margin: 0.2rem 0;
                  padding: 0.2rem;
                  .bgimg {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 1.6rem;
                        display: block;
                        z-index: -1;
                  }
                  .subtitle {
                        font-size: 0.24rem;
                  }
                  .inner {
                        font-size: 0.2rem;
                        width: 4rem;
                        margin: 0 auto;
                  }
            }
      }
}
</style>